<template>
  <div class="v-shape-color-fill g-flex">
    <el-input
      v-model="row.value"
      class="_color-input"
      :disabled="disabled"
      @change="hexChange"
    ></el-input>
    <div
      v-if="selected || row.value"
      class="g-pd-r-4 g-flex"
    >
      <el-color-picker
        v-model="row.value"
        show-alpha
        :disabled="disabled"
        :predefine="predefineColors"
        @change="colorchange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { siderBarStyleColorUtil } from "@/modules/model/comps/station/graphTabs/graphEditor/components/SideBarStyleUtil";
import { predefineColors } from "@/modules/model/comps/station/graphTabs/graphEditor/components/basicStyles/formatModel";
import { ShapeStyleValue } from "@/modules/model/modals/shapeCustomization/ShapeCustomizationManagementModel";
import { ShapeStyleConfigModel } from "@/modules/model/modals/shapeCustomization/comps/ShapeStyleConfiguration/ShapeStyleConfigurationModel";

const props = defineProps<{
  row: ShapeStyleValue;
  selected?: boolean;
  configurationDisabled?: boolean;
  shapeStyleConfig?: ShapeStyleConfigModel;
}>();

const isGradient = computed(() => {
  if (!props.shapeStyleConfig) return false;
  const val = props.shapeStyleConfig.shapeStyleInfo.find(v => v.key === "backgroundisGradient");
  return Boolean(val?.value);
});

const disabled = computed(() => {
  if (!isGradient.value && (props.row.key === "backgroundStartGradient" || props.row.key === "backgroundEndGradient")) {
    return true;
  }

  return props.configurationDisabled;
});

const validHex = hex => {
  if (!hex) return false;
  const reg = /^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
  if (!reg.test(hex)) {
    app.$confirm.popup({
      title: "错误",
      subTitle: "色值必须为十六进制",
      showCheckbox: false,
      status: "error",
      cancelText: ""
    });
    return false;
  }
  return true;
};

const hexChange = () => {
  const isVliadHex = validHex(props.row.value);
  if (!isVliadHex) {
    props.row.value = "";
  }
};

const colorchange = () => {
  props.row.value = siderBarStyleColorUtil.toHex(props.row.value);
};
</script>

<style lang="scss">
.v-shape-color-fill {
  .el-input.is-disabled .el-input__wrapper {
    box-shadow: none;
  }

  .el-input__wrapper {
    box-shadow: none;
    background-color: transparent;
  }

  .el-color-picker__trigger {
    border: 0;
  }
}
</style>
